<template>
  <div class="questClass-box">
  		<el-row :gutter="10">
  		<el-col :span="2"><el-button>删除</el-button></el-col>
  		<el-col :span="2"><el-button @click="add">新增</el-button></el-col>
  	</el-row>
    <Table
      :tableData="tableData"
      :inits="tableinits"
      canSelect
      :operation="operationinits">
      <template slot-scope="rowScope">
        <el-button @click="edit(rowScope)" type="text" size="small">编辑</el-button>
        <el-button @click="del(rowScope)" type="text" size="small">删除</el-button>
      </template>
    </Table>
    <!-- 分页器 S -->
    <el-row>
      <el-col>
        <el-pagination
          layout="prev, pager, next"
          :page-size="15"
          :current-page="pageNo"
          :total="total"
          @current-change="pageNoChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 分页器 E -->
  </div>
</template>

<script>
import Table from '@/components/Table'
import { quest_fmt_getUserManage } from '@/util/dataFMT'

export default {
  name: 'UserManage',
  components: {
    Table
  },
  mounted () {
    this.$API.getUserManage(this.pageNo)
    .then(data => {
      this.total = data.total
      this.tableData = quest_fmt_getUserManage(data.data)
    })
  },
  data () {
    return {
      total: 0,
      pageNo: 1,
      tableData: [],
      tableinits: [
        { label: '编号', width: '55', prop: 'id' },
        { label: '姓名', prop: 'username' },
        { label: '部门', width: '80', prop: 'type' },
        { label: '创建时间', width: '200', prop: 'create_time' },
//      { label: '位置', prop: 'login_time' },
        { label: '性别', prop: 'sex' },
//      { label: '头像', prop: 'image' },
        { label: '工号', prop: 'name' },
//      { label: 'SaaS', prop: 'description' },
        { label: '在线时间', width: '200',prop: 'online_time' }
//      { label: '子列表', prop: 'all_child_id' },

      ],
      operationinits: { width: '100', label: '操作' }
    }
  },
  methods: {
    pageNoChange (pageNo) {
      this.$API.getUserManage(pageNo)
      .then(data => {
        this.tableData = quest_fmt_getUserManage(data.data)
      })
    },
    edit (scope) {
      console.log(scope)
      this.$message.info({
        message: `编辑按钮被按下`
      })
    },
    del (scope) {
      console.log(scope)
      this.$message.info({
        message: `删除按钮被按下`
      })
    },
    add () {
      this.$prompt('用户名称', '新增', {
        confirmButtonText: '保存',
        inputPattern: /.{1,}/,
        inputErrorMessage: '名称不能为空'
      }).then(({ value }) => {
        this.$API.addUserManage(value)
        .then(data => {
          this.pageNoChange(1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style>
 .questClass-box {
   text-align: left;
 }
</style>
